<template>
    <div>
        <div class="comInf">
            <el-row class="merName">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('cause')}}</div></el-col>
                <el-col :span="19" class="right"><div class="grid-content bg-purple-light">{{detailData.recordReason ? detailData.recordReason : '/'}}</div></el-col>
            </el-row>
            <el-row class="regPro">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('probdesc')}}</div></el-col>
                <el-col :span="19" class="right"><div class="grid-content bg-purple-light">{{detailData.remark ? detailData.remark : '/'}}</div></el-col>
            </el-row>
            <el-row class="regImg">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('relapictures')}}</div></el-col>
                <el-col :span="19" class="right">
                    <div class="grid-content bg-purple-light">
                        <el-image v-if="imgList.img0" :src="imgList.img0" :preview-src-list="getSrcList(0)"></el-image>
                        <el-image v-if="imgList.img1" :src="imgList.img1" :preview-src-list="getSrcList(1)"></el-image>
                        <el-image v-if="imgList.img2" :src="imgList.img2" :preview-src-list="getSrcList(2)"></el-image>
                        <span v-if="!detailData.imgId">/</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="regImg">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('thedeals')}}</div></el-col>
                <el-col :span="19" class="right">
                    <div class="grid-content bg-purple-light">
                        <span v-if="isany">{{detailData.recordTrades}}</span>
                        <span v-if="!isany">
                            <span class="follow" v-for="(item, i) in translist" :key="i">{{item}}</span>
                        </span>
                        <span v-if="!detailData.recordTrades">/</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="regNum">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('contactway')}}</div></el-col>
                <el-col :span="19" class="right"><div class="grid-content bg-purple-light">{{detailData.contact ? detailData.contact : '/'}}</div></el-col>
            </el-row>
            <el-row class="regNum">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('complaintime')}}</div></el-col>
                <el-col :span="19" class="right"><div class="grid-content bg-purple-light">{{gmtCreate ? gmtCreate : '/'}}</div></el-col>
            </el-row>
            <el-row class="handle">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('opratn')}}</div></el-col>
                <el-col :span="19" class="right">
                    <div class="grid-content bg-purple-light">
                        <span v-if="detailData.status !== 'END'">
                            <el-button type="primary" size="mini" v-if="detailData.status === 'PENDING'" @click="dispose">{{$t('dispose')}}</el-button>
                            <el-button type="primary" size="mini" v-if="detailData.status !== 'END' && detailData.status !== 'PENDING'" @click="endReplyStolen">{{$t('closequestion')}}</el-button>
                            <el-button type="primary" size="mini" v-if="detailData.status !== 'END' && detailData.status !== 'PENDING'" @click="replyStolen">{{$t('reply')}}</el-button>
                        </span>
                        <span v-if="detailData.status === 'END'">
                            {{$t('problemisover')}}
                        </span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="cardBox">
            <el-table border style="width: 100%" :data="messagelist">
                <el-table-column prop="sysModifiedName" :label="$t('sender')" width="75">
                </el-table-column>
                <el-table-column prop="content" :label="$t('content')">
                </el-table-column>
                <el-table-column prop="gmtCreate" :label="$t('sendtime')" width="150">
                </el-table-column>
            </el-table>
        </div>
        <!-- 回复框 -->
        <el-dialog :title="$t('reply')" :visible.sync="replyDialogVisible" width="30%" @close="replyDialogVisibleClosed(replyStolenForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="replyStolenForm" :rules="replyStolenrule" :model="replyStolenForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('remk')" prop="content" :placeholder="$t('plsipt')">
                    <el-input type="textarea" v-model="replyStolenForm.content"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="replySuggest(replyStolenForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="replyDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getuseraccstolendetail,
    disposeuseraccstolen,
    replyuseraccstolen,
    enduseraccstolen
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            id: '',
            detailData: {},
            imgUrl: [],
            trbImg: '',
            replyStolenForm: {
                appKind: '',
                content: '',
                source: 1,
                suggestId: ''
            },
            isOk: false,
            replyDialogVisible: false,
            messagelist: [],
            imgList: {},
            gmtCreate: '',
            translist: [],
            isany: false,
            replyStolenrule: {
                content: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getcomplaintdet () {
            this.translist = []
            getuseraccstolendetail(JSON.stringify({ id: this.id - 0 })).then(res => {
                if (res.data.code === '000000') {
                    if (res.data.data.list) {
                        for (let i = 0; i <= res.data.data.list.length - 1; i++) {
                            let item = res.data.data.list[i]
                            if (item.type === 0) item.type = this.$t('user')
                            if (item.type === 1) item.type = this.$t('service')
                            if (item.sysModifiedName === '/') item.sysModifiedName = 'user:'
                        }
                        this.messagelist = res.data.data.list
                    }
                    if (res.data.data.imgId) {
                        for (let i = 0; i <= res.data.data.imgId.split(',').length - 1; i++) {
                            let item = res.data.data.imgId.split(',')[i]
                            this.imgUrl.push(item)
                            this.imgList['img' + i] = item
                        }
                    }
                    if (res.data.data.recordTrades.indexOf('[') !== -1) res.data.data.recordTrades = JSON.parse(res.data.data.recordTrades)
                    if (typeof res.data.data.recordTrades !== 'string') {
                        this.isany = false
                        for (let i = 0; i <= res.data.data.recordTrades.length - 1; i++) {
                            let item = res.data.data.recordTrades[i]
                            this.translist.push(item.payOrderNo)
                        }
                    } else {
                        this.isany = true
                    }
                    this.detailData = res.data.data
                }
            })
        },
        dispose () {
            disposeuseraccstolen(JSON.stringify({ id: this.id })).then(res => {
                if (res.data.code === '000000') {
                    if (res.data.data.status === 1) {
                        this.$message({
                            message: this.$t('suctakeover'),
                            type: 'success'
                        })
                        this.getcomplaintdet()
                    } else {
                        this.$message.error(this.$t('takeoverfailure'))
                        this.getcomplaintdet()
                    }
                }
            })
        },
        replyStolen () {
            this.replyStolenForm.appKind = this.detailData.recordUserRole
            this.replyStolenForm.suggestId = this.detailData.id
            this.replyDialogVisible = true
        },
        replyDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        replySuggest (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.replyStolenForm.content = this.replyStolenForm.content.trim()
                replyuseraccstolen(JSON.stringify(this.replyStolenForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('replytosuc'),
                            type: 'success'
                        })
                        this.replyDialogVisible = false
                        this.getcomplaintdet()
                    }
                })
            })
        },
        endReplyStolen () {
            this.$confirm(this.$t('closethecurrcomplaint'), this.$t('closethecurrcomplaint'), {
                cancelButtonText: this.$t('cnl'),
                confirmButtonText: this.$t('cfm')
            }).then(async () => {
                await enduseraccstolen(JSON.stringify({ id: this.id - 0 })).then(res => {
                    if (res.data.code === '000000') {
                        if (res.data.data.status === 1) {
                            this.$message({
                                message: this.$t('shutdownsuc'),
                                type: 'success'
                            })
                            this.getcomplaintdet()
                        } else {
                            this.$message.error(this.$t('closethefail'))
                            this.getcomplaintdet()
                        }
                    }
                })
            }).catch(() => {})
        },
        getSrcList (index) {
            return this.imgUrl.slice(index).concat(this.imgUrl.slice(0, index))
        }
    },
    mounted () {
        this.id = window.sessionStorage.getItem('stolenId')
        this.gmtCreate = window.sessionStorage.getItem('gmtCreate')
        this.getcomplaintdet()
    },
    destroyed () {
        window.sessionStorage.removeItem('stolenId')
        window.sessionStorage.removeItem('gmtCreate')
        this.imgUrl = []
    }
}
</script>

<style lang="less" scoped>
@import './complaintdetails.less';
</style>
